<template>
	<view class="slot-content"  style="background-color: #FFFFFF;">
	<view class="cell-table1">	 
	<u-list :height="contentHeight" style="background-color: #eee;"> 
		<u-list-item v-for="(item,index) in areas" :key="index">
			 
		 <u-cell :title="item.title" :border="false" 
		  :customStyle="{background: item.color}"
		   :isLink="true"
		   :name="item.id"
		   @click="onSelectArea"
		  ></u-cell>
			 
		</u-list-item>
		 
	</u-list>
	<u-list :height="contentHeight" >
		 <u-list-item v-for="(item,index) in streets" :key="index">
		 	 
		  <u-cell :title="item.title" :border="false" 
		   :customStyle="{background: item.color}" 
		    :name="item.id"
		    @click="onSelectSubarea"
		   ></u-cell>
		 	 
		 </u-list-item>
	</u-list>
	</view>	 
	<view class="drop-action">
		<view class="drop-action__cancel">
			<u-button type="default" :plain="true" @click="cancel">取消</u-button>
		</view>
		<view class="drop-action__ok">
			<u-button type="primary" :plain="false" @click="ok">确定</u-button>
		</view>			
		
	 </view>
		
	</view>
</template>

<script>
	export default {
		name:"subAreas",
		props:{
			areas:{
				type: Array,
				default:[],
			},
			width:{
				type: [String, Number] ,
				default: 0,
			},
			height:{
				type: [String, Number] ,
				default: 300,
			},
		},
		emits: ['selectok' ,'changeItem'], 
		data() {
			return {
				streets:[],
				formdata:{
					area:'',
					street:'',
					isok: false,
				},
			};
		},
		computed:{
			contentHeight(){
				return this.height - 50;
			},
			
		},
		methods:{
			onSelectArea( select){
				this.streets = [];
				this.formdata.street = {}
			    this.areas.forEach(( e, i)=>{					 
					if (e.id == select.name)  {
						 this.areas[i]['color'] = '#eee';
						 this.streets = this.areas[i]['children'];
						 this.formdata.area = e ;
					} else{
						this.areas[i]['color'] = '#fff';
					} 
											 
				} )
				
			   this.$emit('changeItem', this.formdata  );
			},
			onSelectSubarea(select){
				this.streets.forEach(( e, i)=>{
					if (e.id == select.name)  {
						 this.streets[i]['color'] = '#eee';						 
						 this.formdata.street = e ;
					} else{
						this.streets[i]['color'] = '#fff';
					} 
											 
				} )
				this.$emit('changeItem',  this.formdata );
			},
			cancel(){ 
			    this.formdata.isok = false;
				this.$emit('selectok',  this.formdata );
			},
			ok(){ 
				this.formdata.isok = true;
				this.$emit('selectok',  this.formdata ); 
			},
		}
	}
</script>

<style lang="scss">
.cell-table1{
	display: flex;
}
.slot-content{
	background: #ffffff !important;
}
.drop-action{
	display: flex; 
	justify-content: center;
	
	&__cancel{ 
		flex-grow: 1;
	}
	
	&__ok{
		flex-grow: 1;
	}
}
</style>